<template>
  <a-button @click="load_data">加载</a-button>
  <vxe-grid
    ref="ref_grid"
    sortable
    border
    resizable
    height="530"
    v-bind="gridOpts"
  >
  </vxe-grid>
</template>

<script lang='ts'>
import { defineComponent, ref, toRaw } from "vue";
import axios from "axios";
import { Grid } from "vxe-table";
import CodeBuilder from "../CodeBuilder/index.vue";

import * as gridOpt from "./gridOption";

export default defineComponent({
  name: "Test",

  setup(props) {
    let data = ref([]);
    const ref_grid = ref({} as Grid);

    let load_data = async () => {
      let ret = await axios.get("/api/user/list");
      let grid = ref_grid.value as any;
      grid.loadData(ret.data);
    };

    let onFilter = (e: any) => {
      console.log("on filter");

      console.log(e);
    };

    const gridOpts = gridOpt.useGridOptions();

    return {
      load_data,
      onFilter,
      ref_grid,
      data,

      gridOpts,
    };
  },
});
</script>

<style>
</style>